<!DOCTYPE html>
<html>
<head>
<title>firstAjax.html</title>
<meta charset="UTF-8">
</head>

<body>
	<select id="myprovince">
		<option value="0">========省份=========</option>
	</select>

</body>

<script type="text/javascript">
  		window.onload = function(){
  		
  				var xmlHttpRequest = null;
  				loadProvinces();
  				
  				function loadProvinces(){
  				  	create(); // 创建Ajax关键对象
  					xmlHttpRequest.open("post", "jsonDemo");
  					xmlHttpRequest.send(null);
  					// 添加监听回调函数
  					xmlHttpRequest.onreadystatechange = function(){
  						// 判断是否正确接收
  						if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
  								// 正确接收，那么现实在Div中
  								var msgJson = xmlHttpRequest.responseText;
  								// 使用JS把json字符串转换为JSON对象
  								var jsonObj = eval("("+msgJson+")");
  								// 使用js解析JSON
  								var selEle = document.getElementById("myprovince");
  								var jsonArr = jsonObj.provinces;
  								for(var i=0;i<jsonArr.length;i++){
  									var optionEle = document.createElement("option");
  									optionEle.setAttribute("value", i+1);
  									optionEle.textContent = jsonArr[i].title;
  									selEle.appendChild(optionEle);
  								}
  						}
  					}
  				}
  				
  				
  				function create(){
  					if(window.XMLHttpRequest) {
							// 说明是非IE浏览器
							xmlHttpRequest = new XMLHttpRequest();  					
  					}else{
  							xmlHttpRequest = new ActiveXObject("Microsoft.XMLHttp");
  					}
  				}
  		}
  </script>

</html>
